import ShopHeader from "./components/ShopHeader";
import ShopTab from "./components/ShopTab";
import ShopContent from "./components/ShopContent";
import Pagination from "@ui/RJMart/pagination";
import BackTop from "@ui/RJMart/backTop";
import Icon from "@ui/RJMart/icons";

import HttpUtils from "@page/common/utils/HttpUtils";
import ToastUtils from "@page/common/utils/ToastUtils";
import Uts from "@module/Uts";

import "@page/common/css/commheader.css";

import "./style.scss";

class SupplierShop extends React.Component {
    constructor() {
        super();
        let params = $state.params;
        this.suppId = (params.suppId || params.id) - 0;
        this.categoryId = params.categoryId;
        this.key = params.keyword;
        this.state = {
            total: 0,
            goodList: [],
            isLoading: false,
            formData: {
                brandIds: [],
                brandName: "",
                casNo: "",
                city: "",
                orgId: Uts.getCookie("orgId"),
                pageSize: 20,
                pageNo: 1,
                suppIds: [],
                suppName: "",
                sort: "",
                key: "",
                maxPrice: "",
                minPrice: "",
                categoryIds: []
            }
        };
    }

    componentDidMount() {
        this.getShopProducts();
    }

    componentWillUpdate() {
        let hash = window.location.hash;
        if (hash != this.hash) {
            let params = $state.params;
            this.suppId = params.suppId - 0;
            this.categoryId = params.categoryId;
            this.key = params.keyword;
            let data = this.state.formData;
            data.pageNo = 1;
            this.setState(
                {
                    formData: data
                },
                () => {
                    this.getShopProducts();
                }
            );
        }
    }

    getShopProducts = () => {
        let params = this.state.formData;
        params.suppIds = [this.suppId];

        if (this.categoryId) {
            params.categoryIds = [this.categoryId];
        } else {
            params.categoryIds = [];
        }

        if (this.key) {
            params.key = this.key;
        } else {
            params.key = "";
        }

        ToastUtils.loading();
        HttpUtils.getShopProducts(params)
            .then(res => {
                console.log(res);
                ToastUtils.hide();
                if (res.message == "success") {
                    this.setState({
                        goodList: res.products,
                        total: res.total,
                        isLoading: true
                    });
                }
            })
            .catch(err => {
                ToastUtils.hide();
                console.log(err);
            });
    };

    handleChange = pageNo => {
        let data = this.state.formData;
        data.pageNo = pageNo;
        this.setState(
            {
                formData: data
            },
            () => {
                this.getShopProducts();
            }
        );
    };

    //排序cb
    changeSort = sort => {
        let data = this.state.formData;
        data.sort = sort;
        this.setState(
            {
                formData: data
            },
            () => {
                this.getShopProducts();
            }
        );
    };

    //价格cb
    filterPrice = (minPrice, maxPrice) => {
        let data = this.state.formData;
        data.minPrice = minPrice;
        data.maxPrice = maxPrice;
        data.pageNo = 1;
        this.setState(
            {
                formData: data
            },
            () => {
                this.getShopProducts();
            }
        );
    };

    render() {
        this.hash = window.location.hash;
        const { total, goodList, formData, isLoading } = this.state;
        const style = {
            right: "50px",
            background: "transparent",
            border: "none"
        };
        return (
            <div className="rj_supplier-shop">
                <ShopHeader id={this.suppId} />
                <ShopTab changeTab={this.changeTab} id={this.suppId} />
                <ShopContent
                    suppId={this.suppId}
                    list={goodList}
                    changeSort={this.changeSort}
                    filterPrice={this.filterPrice}
                    pageNo={formData.pageNo}
                    pageSize={formData.pageSize}
                    total={total}
                    handleChange={this.handleChange}
                    isLoading={isLoading}
                />

                <div style={{ height: 80 }} />
                <div className={"app-footer-top-line"} />
                <BackTop style={style}>
                    <Icon
                        type="point-up"
                        color="#fff"
                        backgroundColor="#0093eb"
                        width="48px"
                        height="48px"
                        style={{ borderRadius: "4px" }}
                    />
                </BackTop>
            </div>
        );
    }
}

export default SupplierShop;
{
    /* // ReactDOM.render(<SupplierShop/>,document.getElementById('reactRoot')) */
}
